<template>
	<div class="produce_list">
		<!--遍历产品列表 -->
		<router-link :to="'/product/'+item.action.path" class="item" v-for="item in data" :key="item.action.path">
			<div class="img">
				<img v-lazy="item.puzzle_url" alt="" width="100%">
			</div>
			<div class="des">
				<!-- 名称 -->
				<h4>{{item.name}}</h4>
				<!-- 价格 -->
				<p>{{item.price}}
					<!-- 标签 -->
					<span v-for="label in item.labels" :key="label" class="label">
						{{label}}
					</span>
				</p>
			</div>
		</router-link>
	</div>
</template>
<style scoped="scoped" lang="scss">
	.item{
		display: flex;
		background-color: #fafafa;
		border-radius: 4px;
		margin-bottom: .3rem;
		font-size: .24rem;
		.img{
			width: 30%;
			img{
				min-height: 80px;
			}
		}
		.des{
			flex:1;
		}
		h4{ 
			// font-weight: normal;
			line-height: .88rem;
		}
		.label{
			border:1px solid gold; 
			margin:0 .05rem; 
			padding:.05rem;
			color:goldenrod;
			font-size: 0.2rem;
		}
	}
</style>
<script>
	export default {
		props:{
			data:{
				type:Array,
				default(){return []}
			}
		}
	}
</script>


